<template>
    <div class="Classification">
        <div class="Classification_main flex aic">
            <div class="Classification_main_title">
                <span class="fontz">职位分类：</span>
            </div>
            <div class="Classification_main_text flex aic">
                <span class="cursor_pointer" v-for="(item, index) in classData" :key="index" @click="classClick(item)"
                    :class="classValue == item.dictValue ? 'Classification_main_text_btn fontz' : 'fontz'">{{ item.dictLabel
                    }}</span>
            </div>
        </div>
        <div class="Classification_main flex aic">
            <div class="Classification_main_title">
                <span class="fontz">薪资：</span>
            </div>
            <div class="Classification_main_text flex aic">
                <span class="cursor_pointer" v-for="(item, index) in free" :key="index" @click="freeClick(item)"
                    :class="freeValue == item.dictValue ? 'Classification_main_text_btn fontz' : 'fontz'">{{ item.dictLabel
                    }}</span>
            </div>
        </div>
        <div class="Classification_main flex aifs">
            <div class="Classification_main_title">
                <span class="fontz">更多：</span>
            </div>
            <div class="Classification_main_text flex aic">
                <el-select v-model="ruleForm.educationRequirements" clearable placeholder="学历要求" style="width: 240px;margin-bottom: 16px;"
                    @change="blurClick()">
                    <el-option v-for="item in options1" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                </el-select>
                <el-select v-model="ruleForm.requirementsYears" clearable placeholder="工作经验" style="width: 240px;margin-bottom: 16px;"
                    @change="blurClick()">
                    <el-option v-for="item in options2" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                </el-select>
                <el-select v-model="ruleForm.arrivalTime" clearable placeholder="到岗时间" style="width: 240px;margin-bottom: 16px;"
                    @change="blurClick()">
                    <el-option v-for="item in options3" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                </el-select>
                <!-- <span v-for="(item, index) in more" :key="index" @click="freeClick(item)"
                    :class="freeValue == item.id ? 'Classification_main_text_btn fontz' : 'fontz'">{{ item.name }}</span> -->
            </div>
        </div>
    </div>
</template>
  
<script>
import { dictSect } from "@/utils/dictUnit"
export default {
    name: 'Classification',
    data() {
        return {
            value: "",
            classValue: "不限",
            freeValue: "不限",
            moreValue: "-1",
            classData: [],//职位
            free: [
                {
                    dictValue: "不限",
                    dictLabel: "不限",
                }, {
                    dictValue: "0,3000",
                    dictLabel: "3k以下",
                }, {
                    dictValue: "3000,5000",
                    dictLabel: "3~5k",
                }, {
                    dictValue: "5000,10000",
                    dictLabel: "5~10k",
                }, {
                    dictValue: "10000,20000",
                    dictLabel: "10~20k",
                }, {
                    dictValue: "20000,50000",
                    dictLabel: "20~50k",
                }, {
                    dictValue: "50000,999999999",
                    dictLabel: "50k以上",
                }
            ],//薪资
            more: [],//更多
            options1: [],
            options2: [],
            options3: [],
            options: [],
            ruleForm: {
                positionClassify: "",//职位分类
                educationRequirements: "",//学历
                requirementsYears: "",//工作经验
                arrivalTime: "",//到岗时间
                salaryStart: "",//薪资开始
                salaryEnd: "",//薪资结束
            }
        }
    },
    mounted() {
        this.classData = [...[{ dictValue: "不限", dictLabel: "不限" }], ...dictSect("position_classify")]
        // this.free = [...[{ dictValue: "不限", dictLabel: "不限" }], ...dictSect("salary")]
        this.options1 = dictSect("education")
        this.options2 = dictSect("requirements_years")
        this.options3 = dictSect("arrival_time")
        console.log(this.classData);
        this.loading = false
    },
    methods: {
        classClick(item) {
            this.classValue = item.dictValue
            if (this.classValue == "不限") {
                this.ruleForm.positionClassify = ""
            } else {
                this.ruleForm.positionClassify = this.classValue
            }
            this.$emit("ClassificationClick", this.ruleForm)
        },
        freeClick(item) {
            this.freeValue = item.dictValue
            if (this.freeValue == "不限") {
                this.ruleForm.salaryStart = ""
                this.ruleForm.salaryEnd = ""
            } else {
                // this.ruleForm.freeValue = this.freeValue
                this.ruleForm.salaryStart = this.freeValue.split(",")[0]
                this.ruleForm.salaryEnd = this.freeValue.split(",")[1]
            }
            this.$emit("ClassificationClick", this.ruleForm)

        },
        blurClick() {
            this.$emit("ClassificationClick", this.ruleForm)
        },

    }
}
</script>
  
<style scoped lang="scss">
.Classification {
    width: 100%;
    background: #F8F9FA;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;
    padding: 30px 30px 6px 30px;
}

.Classification_main {
    margin-bottom: 24px;
}

.Classification_main_title {
    text-align: right;
    width: 100px;

    span {
        font-weight: 700;
        color: #3D3D3D;
        font-size: 20px;
    }
}

.Classification_main_text {
    flex-wrap: wrap;

    .Classification_main_text_btn {
        padding: 0px 19px;
        line-height: 40px;
        background: #2F6CBC;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        font-weight: 400;
        color: #F6F6F6;
    }

    span {
        margin-right: 30px;
        font-size: 20px;
    }

    .el-select {
        width: 139px;
        height: 40px;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        margin-right: 30px;
        // border: 1px solid #CACFD6;
    }
}</style>
  